/**
 * @file layouts/Tabs.js
 *  tab 切换
 * @author wangjunjun
 */

import React, {PropTypes, PureComponent} from 'react';
import {autobind} from 'core-decorators';
import _ from 'lodash';
import {Tabs} from 'antd';
import ReactDOM from 'react-dom';


const TabPane = Tabs.TabPane;

const maps = {
  activeKey: "1",
  panes: []
};

const QUERY_MAP = {};

export default class MenuTabs extends PureComponent {
  static propTypes = {
    children: PropTypes.node.isRequired
  }

  static defaultProps = {}

  componentWillReceiveProps(nextProps) {
    const {userInfo} = nextProps;
    const {queryUser} = this.props;
    this.config = {
      welcomehtzq: {
        key: '-1',
        title: '华泰证券',
        url: '/welcomehtzq'
      }
    }
    userInfo.menus && userInfo.menus.map((item, i) => {
      this.config[item.menuCode] = {
        key: String(i),
        title: item.menuText,
        url: item.menuURL
      }
    })

  }

  @autobind
  onChange(activeKey) {
    maps.activeKey = activeKey

    const {
      push,
      location: {
        pathname,
        query
      }
    } = this.props;
    maps.panes.forEach((item) => {
      if (item.key === activeKey) {
        push({pathname: item.url, query: item.query});
      }
    });

  }

  @autobind
  onEdit(targetKey, action) {
    this[action](targetKey);
  }

  @autobind
  add() {}

  @autobind
  remove(targetKey) {
    let activeKey = maps.activeKey;
    let lastIndex;
    let lastUrl;
    let lastQuery;
    maps.panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const panes = maps.panes.filter(pane => pane.key !== targetKey);
    if (lastIndex >= 0) {
      activeKey = panes[lastIndex].key;
      lastUrl = panes[lastIndex].url;
      lastQuery = panes[lastIndex].query;
    }
    maps.panes = panes;
    maps.activeKey = activeKey;
    this.props.push({
      pathname: lastUrl,
      query: lastQuery
        ? lastQuery
        : QUERY_MAP[lastUrl.split('/')[lastUrl.split('/').length - 1]]
    });

  }

  renderTabPane(pane) {
    return (
      <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
        {pane.key === maps.activeKey
          ? this.props.children
          : pane.component}
      </TabPane>
    );
  }

  render() {
    if (this.config) {
      const {
        children,
        location: {
          pathname,
          query
        }
      } = this.props;
      const tempArr = pathname.split('/');
      var currentTab = tempArr[tempArr.length - 1]

      const {
        from,
        ...payload
      } = query

      if(Object.keys(this.config).length>1){
        const key=(this.config)[currentTab]?(this.config)[currentTab].key:`${currentTab}_${payload.at}`
        maps.activeKey = key
        if (!maps.panes.find(v => v.key === key)) {
          maps.panes.push({
            key,
            title: children.props.route.title||'华泰证券',
            url: pathname,
            query: payload,
            component: children,
            closable: maps.panes.length !== 0,
          });
        }
        
        
      }

      const thisPane=maps.panes.find(item => item.key === maps.activeKey)
      if(thisPane){
        thisPane.query = payload
      }
      return (
        <div className="menuTabs">
          <Tabs onChange={this.onChange} activeKey={maps.activeKey} type="editable-card" onEdit={this.onEdit} hideAdd className="main-tabs">
            {
							maps.panes.map(pane => this.renderTabPane(pane),)
						}
          </Tabs>
        </div>
      );
    }
		else{
			return null
		}
  }
}
